<template>
	<div class="trainServer train">
		<trainHeader name="套餐选择"></trainHeader>
		<div>
			<div v-for="item in list" class="trainServer_box" @click="chooseServer(item)">
				<header>
					<span>{{item.setMealName}}</span>
					<span>￥{{item.setMealAmount}}/人</span>
				</header>
				<div v-for="val in item.detailsArr" class="trainServer_font">
					{{val}}
				</div>
				<div class="trainServer_pic" v-if="item.setMealId == id">
					<img src="http://h5.kpcx179.com/wximages/train/tcxz_xuanze@2x.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	
	.trainServer {
		background-color: #fff;
	}
	
	.trainServer_box {
		padding: 38px 0;
		margin: 0 38px;		
		border-bottom:2px solid #F2F2F2;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.trainServer_box:last-child{
		border:0;
	}
	
	.trainServer_box > header {
		font-size: 32px;
		height: 70px;
		line-height: 70px;
		color:#444444;
	}
	
	.trainServer_font {
		font-size: 28px;
		line-height: 50px;
		color: #8A8A8A;
		width: 90%;
	}
	
	.trainServer_pic {
		width: 40px;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainServer_pic > img {
		width: 100%;
		height: 30px;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	export default {
		name: "trainServer",
		data() { //数据
			return {
				id:0,
				list:[],//套餐列表
			}
		},
		mounted() {
			this.id = this.$route.query.id; //选中的Id;
			this.getServer(this.$route.query.price,Number(this.$route.query.ticketType));
		},
		created() {
			
		},
		methods: {
			getServer(price,ticketType){//获取出现服务
				this.$loading.show();
				var param = {
					orderType: ticketType ? "7" : "3", //调用函数时已经判断订单为普通单
					amount: price,//票价
				};
				this.$http.post(this.$baseUrl.baseurl + "coupon/app/coupon/couponSetMealList", param).then((res) => {
					this.$loading.hide();	
					if (res.data.Code == "0") {
						res.data.Result.list.forEach((val, index)=>{
				          res.data.Result.list[index].detailsArr = val.details.split('\n');
				        });
						this.list = res.data.Result.list;
//						console.log(this.list);
					} else {	
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			chooseServer(item) {
				var server = {
		          money: item.setMealAmount, //钱
		          content: item.setMealName, //名称
		          setMealId: item.setMealId, //Id
		       	};
		       	var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));//上页面状态
				trainStore.fillOrder.server = server;
				this.$store.commit('TRAINSTORE', trainStore);
		       	this.$router.go(-1);
			}
		},
		components: {
			trainHeader
		},
	};
</script>